import React,{useEffect, useState} from 'react';
import {View,TouchableOpacity,StyleSheet,ScrollView,Text,Image,TextInput,Alert} from 'react-native';
import '../../global'
import PwdInput from 'react-native-pwd-input'
import { useDispatch } from 'react-redux';
const showAlert = (msg,fun) =>
  Alert.alert(
    "提示",
    msg,
    [
      {
        text: "确认",
        onPress: fun,
        style: "cancel",
      },
    ],
    {
      cancelable: false,
    }
  );
const Login=({navigation})=>{
    const dispatch=useDispatch();
    const [account,setAccount]=useState('');
    const [password,setPassword]=useState('');
    const [list,setList]=useState([{}])
    useEffect(()=>{
        fetch('https://wx.qasdwer.top:8080/user/login')
        .then(res=>res.json())
        .then(res=>{ 
          setList(res);
        })
        .catch((error)=>{
            console.log("Error");
            throw error;
          });
    },[])
    return(
        <ScrollView style={{backgroundColor:'white'}}>
            <Text style={{fontSize:changeW(40),marginTop:changeW(100),color:'rgba(0,0,0,0.7)',marginLeft:changeW(20)}}>请输入手机号</Text>
            <View style={styles.view}>
            <TextInput
                style={styles.account}
                onChangeText={text => setAccount(text)}
                value={account}
                placeholder='请输入您的账号'
            />
            
            
            <PwdInput
                containerStyle={styles.pwd}
                style={{paddingLeft:25,height:changeH(100)}}
                placeholder='请输入密码'
                openImg={{uri:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.51yuansu.com%2Fpic2%2Fcover%2F00%2F43%2F63%2F581373627e8b9_610.jpg&refer=http%3A%2F%2Fpic.51yuansu.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1652948761&t=9bb9857f5c3c9bc6c1e137af94401733'}}
                closeImg={{uri:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.51yuansu.com%2Fpic2%2Fcover%2F00%2F32%2F68%2F5810ff7bc8d88_610.jpg&refer=http%3A%2F%2Fpic.51yuansu.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1652948761&t=1a3ed02805fd0a0cbbb36bd4be34fd8a'}}
                imageStyle={{width:25,height:25,marginRight:changeW(30)}}
                onChangeText={(txt)=>{setPassword(txt)}}
                value={password}
                />
            </View>
            <TouchableOpacity style={styles.login} onPress={()=>{
                if(account==''||password==''){
                    showAlert('账号密码不能为空');
                    setAccount('');
                    setPassword('');
                }else{
                    for(var i=0;i<list.length;i++){
                        if(account==list[i].user_number){
                             if(password==list[i].user_pwd){
                                setAccount('');
                                setPassword('');
                                dispatch({type:"login",value:true,name:list[i].user_name,account:list[i].user_number,school:list[i].user_major,log:'退出登录',img:list[i].user_img})
                                 navigation.navigate('Home')
                                 return;
                             }else{
                                setAccount('');
                                setPassword('');
                                showAlert('密码错误')
                                 return;
                             }
                     }
                    }
                    setAccount('');
                    setPassword('');
                    showAlert('没有该账号，请先注册',()=>navigation.navigate('Register'))
                }
            
            }}>   
                 <Text style={styles.logintxt}>登录</Text> 
            </TouchableOpacity>
            <TouchableOpacity  onPress={()=>navigation.navigate('Register')}>   
                 <Text style={styles.reginstertxt}>立即注册</Text> 
            </TouchableOpacity>
        </ScrollView>
    )
}

const styles=StyleSheet.create({
    view:{
        marginTop:changeH(100),
        position:'relative'
    },
    account:{
        paddingLeft:25,
        height:changeH(100),
        borderColor: 'gray',
        borderWidth: 1,
        width:'80%',
        marginLeft:changeW(80),
        borderRadius:changeW(40)
    },
    pwd:{
        marginTop:23,
        width:'80%',
        marginLeft:changeW(80),
        borderWidth:1,
        borderColor:'gray',
        borderRadius:changeW(40)
    },
    login:{
        width:changeW(500),
        height:changeH(80),
        backgroundColor:'rgb(150,150,150)',
        borderRadius:changeW(30),
        marginLeft:changeW(120),
        marginTop:changeH(100),
        justifyContent:'center',
        alignItems:'center'
    },
    logintxt:{
        fontSize:changeW(30),
        color:'rgba(255,255,255,0.9)'
    },
    
    reginstertxt:{
        fontSize:changeW(23),
        marginLeft:changeW(580),
        marginTop:changeH(50),
        color:'rgb(230,180,126)'
    }
})
export default Login;